/* 全局主题变量 */
:root {
  /* 主题色变量 */
  --theme-primary: #409EFF;
  --theme-primary-light: #79bbff;
  --theme-primary-lighter: #a0cfff;
  --theme-primary-dark: #337ecc;
  --theme-primary-darker: #2b6cb0;
  --theme-primary-alpha-10: rgba(64, 158, 255, 0.1);
  --theme-primary-alpha-20: rgba(64, 158, 255, 0.2);
  --theme-primary-alpha-30: rgba(64, 158, 255, 0.3);

  /* 背景色 */
  --bg-color: #ffffff;
  --bg-color-secondary: #f8f9fa;
  --bg-color-tertiary: #f0f0f0;

  /* 文字颜色 */
  --text-color-primary: #333333;
  --text-color-secondary: #666666;
  --text-color-tertiary: #999999;

  /* 边框颜色 */
  --border-color: #e0e0e0;
  --border-color-light: #f0f0f0;

  /* 阴影 */
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* 深色主题 */
.dark {
  --bg-color: #1a1a1a;
  --bg-color-secondary: #2d2d2d;
  --bg-color-tertiary: #404040;

  --text-color-primary: #ffffff;
  --text-color-secondary: #cccccc;
  --text-color-tertiary: #999999;

  --border-color: #404040;
  --border-color-light: #2d2d2d;

  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.25);
  --shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* 确保主题色在深色模式下也能正确显示 */
.dark .el-menu-item.is-active {
  background-color: var(--theme-primary) !important;
  color: #ffffff !important;
}

.dark .el-sub-menu.is-active .el-sub-menu__title {
  color: var(--theme-primary) !important;
}

/* 应用主题色到各个组件 */

/* 侧边栏 */
.sidebar {
  background-color: var(--bg-color) !important;
  border-right-color: var(--border-color) !important;
}

.sidebar .el-menu {
  background-color: var(--bg-color) !important;
  border-right: none !important;
}

.sidebar .el-menu-item {
  color: var(--text-color-secondary) !important;
}

.sidebar .el-menu-item:hover {
  background-color: var(--theme-primary-alpha-10) !important;
  color: var(--theme-primary) !important;
}

.sidebar .el-menu-item.is-active {
  background-color: var(--theme-primary-alpha-20) !important;
  color: var(--theme-primary) !important;
}

.sidebar .el-sub-menu__title {
  color: var(--text-color-secondary) !important;
}

.sidebar .el-sub-menu__title:hover {
  background-color: var(--theme-primary-alpha-10) !important;
  color: var(--theme-primary) !important;
}

/* 顶部导航 */
.top-navigation {
  background-color: var(--bg-color) !important;
  border-bottom-color: var(--border-color) !important;
}

.top-navigation .breadcrumb-item {
  color: var(--text-color-secondary) !important;
}

.top-navigation .breadcrumb-item.is-link:hover {
  color: var(--theme-primary) !important;
}

/* 卡片组件 */
.el-card {
  background-color: var(--bg-color) !important;
  border-color: var(--border-color-light) !important;
  box-shadow: var(--shadow-medium) !important;
}

.el-card__header {
  background-color: var(--bg-color) !important;
  border-bottom-color: var(--border-color-light) !important;
}

/* 按钮主题色应用 */
.el-button--primary {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}

.el-button--primary:hover {
  background-color: var(--theme-primary-light) !important;
  border-color: var(--theme-primary-light) !important;
}

.el-button--primary:active {
  background-color: var(--theme-primary-dark) !important;
  border-color: var(--theme-primary-dark) !important;
}

/* 链接颜色 */
.el-link--primary {
  color: var(--theme-primary) !important;
}

.el-link--primary:hover {
  color: var(--theme-primary-light) !important;
}

/* 标签颜色 */
.el-tag--primary {
  background-color: var(--theme-primary-alpha-20) !important;
  border-color: var(--theme-primary-alpha-30) !important;
  color: var(--theme-primary) !important;
}

/* 进度条 */
.el-progress-bar__inner {
  background-color: var(--theme-primary) !important;
}

/* 开关 */
.el-switch.is-checked .el-switch__core {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}

/* 单选框和复选框 */
.el-radio__input.is-checked .el-radio__inner {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}

/* 输入框焦点状态 */
.el-input__wrapper.is-focus {
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 0 1px var(--theme-primary-alpha-20) !important;
}

.el-textarea__inner:focus {
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 0 1px var(--theme-primary-alpha-20) !important;
}

/* 选择器 */
.el-select .el-input.is-focus .el-input__wrapper {
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 0 1px var(--theme-primary-alpha-20) !important;
}

/* 分页器 */
.el-pagination .el-pager li.is-active {
  background-color: var(--theme-primary) !important;
  color: #fff !important;
}

.el-pagination .btn-next:hover,
.el-pagination .btn-prev:hover {
  color: var(--theme-primary) !important;
}

/* 表格 */
.el-table th.el-table__cell {
  background-color: var(--bg-color-secondary) !important;
  color: var(--text-color-primary) !important;
}

.el-table .el-table__row:hover > td {
  background-color: var(--theme-primary-alpha-10) !important;
}

/* 对话框 */
.el-dialog {
  background-color: var(--bg-color) !important;
}

.el-dialog__header {
  border-bottom-color: var(--border-color-light) !important;
}

/* 抽屉 */
.el-drawer {
  background-color: var(--bg-color) !important;
}

/* 下拉菜单 */
.el-dropdown-menu {
  background-color: var(--bg-color) !important;
  border-color: var(--border-color) !important;
}

.el-dropdown-menu__item:hover {
  background-color: var(--theme-primary-alpha-10) !important;
  color: var(--theme-primary) !important;
}

/* 工具提示 */
.el-tooltip__popper {
  background-color: var(--bg-color-tertiary) !important;
  color: var(--text-color-primary) !important;
  border-color: var(--border-color) !important;
}

/* 紧凑模式 */
.compact-mode .el-card {
  margin-bottom: 12px !important;
}

.compact-mode .el-form-item {
  margin-bottom: 16px !important;
}

.compact-mode .el-button {
  padding: 6px 12px !important;
}

/* 无动画模式 */
.no-animations * {
  transition: none !important;
  animation: none !important;
}

/* 自定义组件主题应用 */
.metric-card:hover {
  box-shadow: var(--shadow-heavy) !important;
}

.chart-card {
  background-color: var(--bg-color) !important;
  box-shadow: var(--shadow-medium) !important;
}

.page-header {
  background-color: var(--bg-color) !important;
  box-shadow: var(--shadow-medium) !important;
}

/* 确保所有文本颜色正确应用 */
body {
  color: var(--text-color-primary) !important;
  background-color: var(--bg-color-secondary) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-color-primary) !important;
}

p {
  color: var(--text-color-secondary) !important;
}

/* 滚动条主题 */
::-webkit-scrollbar-thumb {
  background-color: var(--theme-primary-alpha-30) !important;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--theme-primary-alpha-20) !important;
}
